<template>
    <div class="city-list " ref="wrapper">
        <div class="conten">
            <div class="area">
                <div class="title">
                    当前城市
                </div>
                <div class="button-list">
                    <button>{{this.city}}</button>
          
                
                </div>
            </div>
            
            <div class="area">
                <div class="title">
                    热门城市
                </div>
                <!--列表循环渲染热门城市-->
                <div class="button-list">
                    <button v-for="(item,index) of hotCities"
                            :key="item.id"
                        @click="changeCityHandler(item.name)"
                    >{{item.name}}</button>
                </div>
            </div>
            <!--列表循环渲染 字母和城市列表-->
            <div class="city-wrap" v-for="(item,key) of cities" :key="key">
                <!--字母-->
                <div class="word"   :ref="key">
                    {{key}}
                </div>
                <!--继续循环字母对象的数组 的所有城市列表-->
                <div class="citt-item-list" v-for="(city,index) of item" :key="city.id">
                    <div class="city-item"    @click="changeCityHandler(city.name)">
                        {{city.name}}
                    </div>
                </div>
            </div>
        </div>
    
    </div>
</template>

<script>
  import BScroll from 'better-scroll' // 引入下拉插件
  import {mapState , mapMutations ,mapGetters} from 'vuex' // 引入快捷获取state


  
  export default {
    name: 'city-list',
    mounted () {
      this.scroll = new BScroll(this.$refs.wrapper)
    },
    // 注册和限制父组件传递数据的类型
    props: {
      hotCities: Array,
      cities: Object,
      cityWord: String,
    },
    // 数据监听器
    watch:{
      // 监听props的 cityWord属性的变化
      cityWord(){
         if (this.cityWord) {
           // 子组件监听父组件的props
           this.scroll.scrollToElement(this.$refs[this.cityWord][0])
         }
      }
    },
    methods:{
      // 利用mapMutations辅助函数  将 `this.doChangeCity()` 映射为 `this.$store.commit('doChangeCity')`
    ...mapMutations(['doChangeCity']),
      
      changeCityHandler(city){
        this.doChangeCity(city)
        // 选择好城市后 路由到首页  使用router的函数式跳转
        this.$router.push('/')
      }
    },
    computed:{
      ...mapState(['city']),
      ...mapGetters(['str']), // 映射store中的 getters计算属性
    }
  }
</script>

<style scoped lang="stylus">
    $borderBottom() {
        border-bottom 1px solid #ccc
    }
    
    .city-list {
        // 将城市列表高度设置为屏幕高度  overflow heidden隐藏多余元素
        position absolute;
        top: 1.85rem;
        left: 0;
        right: 0;
        bottom: 0;
        overflow hidden;
        .area {
            .title {
                // border-bottom: 1px solid #ccc;
            }
            
            .title, .word {
                background-color: #eee;
                color: #666;
                font-size: 0.26rem;
                line-height: 0.6rem;
                padding-left: 0.2rem;
            }
            
            .button-list {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                box-sizing: border-box;
                padding: 0.1rem 0.2rem 0.1rem 0;
                
                button {
                    height: 0.55rem;
                    border-radius: 0.05rem;
                    width: 27%;
                    text-align: center;
                    border: 1px solid #ccc;
                    background-color: #fff;
                    margin: 0.1rem 0.2rem;
                }
            }
        }
        
        .citt-item-list {
            
            .city-item {
                padding 0.2rem;
                width 90%;
                $borderBottom()
            }
        }
        
        .word {
            background-color: #eee;
            color: #666;
            font-size: 0.26rem;
            line-height: 0.6rem;
            padding-left: 0.2rem;
        }
    }
    
    .borderBottom {
    
    }
</style>